﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8" xml:lang="utf-8">
<head>
<title>example - http://code.google.com/p/passworp-jcl/</title>
<script type="text/javascript" src="jcl.js"></script>
</head>
<body>


<div class="test" id="test" style="position:absolute;display:block;width:300px;height:50px;left:100px;top:100px;background:#000;border:1px solid #f90;">
	<span style="color:#fff;">感谢使用 jcl javascript frameworks</span>
</div>

<script type="text/javascript">
var box = jcl('id', 'test');
//句柄
var handle = [];
//初始化
function init(){
	box.width(300);
	box.height(50);
	box.top(100);
	box.left(100);
	box.alpha(100);
};
//第1帧
function frame1(){
	init();
	handle.push(box.animateWidth(3, (box.width() + 20), null, frame2));
};
//第2帧
function frame2(){
	handle.push(box.animateWidth(2, (box.width() - 100), null, frame3));
};
//第3帧
function frame3(){
	handle.push(box.animateAlpha(4, 0, null, frame4));
};
//第4帧
function frame4(){
	handle.push(box.animateWidth(5, (box.width() + 20), null));
	handle.push(box.animateHeight(5, (box.height() + 20), null));
	handle.push(box.animateAlpha(5, 100, null, frame5));
};
//第5帧
function frame5(){
	handle.push(jcl.timerStart(function(){
		handle.push(box.animateLeft(3, (box.left() + 100), null, frame6));
	}, 1000, 1));
};
//第6帧
function frame6(){
	handle.push(jcl.timerStart(function(){
		handle.push(box.animateTop(6, (box.top() + 100), null, function(){
			alert('当前位置 x=' + box.left() + ' y=' + box.top() + ' width=' + box.width() + ' height=' + box.height());
		}));
	}, 1000, 1));
};
</script>
<input type="button" value="开始" onclick="frame1();"/>
<input type="button" value="停止" onclick="jcl.animateStop(handle);"/>
</body>
</html>
